<!--这是查看产品组件-->
<template>
  <div class="app-container">
    <div class="filter-container c-flex-row c-aligni-center c-justify-sb">
      <div>
        <el-button @click="handCopy(copyUrl, $event)">复制链接</el-button>
        <el-button v-if="!this.$route.params.catId && permission == 3" type="primary" @click="linkToAdd">添加产品
          <!-- <a href="/mall/createProduct">添加产品</a> -->
        </el-button>
      </div>
      <el-form class="form-container">
        <el-input @keyup.enter.native="handleFilter" v-model="listQuery.name" clearable placeholder="产品名称"
                  style="width: 150px;"></el-input>
        <el-date-picker type="date" :editable="false" format="yyyy-MM-dd" placeholder="发布日期（开始）" v-model="listQuery.publish_time">
        </el-date-picker>
        <el-date-picker type="date" :editable="false" format="yyyy-MM-dd" placeholder="发布日期（结束）" v-model="listQuery.end_time">
        </el-date-picker>
        <el-select clearable v-if="!this.$route.params.catId" style="width: 120px;" v-model="listQuery.selectSort"
                   placeholder="分类">
          <el-option
            v-for="item in sortOptions"
            :key="item.gcId"
            :label="item.name"
            :value="item.gcId">
          </el-option>
        </el-select>
        <p class="margin-b10"></p>
        <el-select clearable style="width: 100px;" v-model="listQuery.isNew" placeholder="新品">
          <el-option key="1" label="是" value="1"></el-option>
          <el-option key="-1" label="否" value="-1"></el-option>
        </el-select>
        <el-select clearable style="width: 100px;" v-model="listQuery.isHot" placeholder="热门">
          <el-option key="1" label="是" value="1"></el-option>
          <el-option key="-1" label="否" value="-1"></el-option>
        </el-select>
        <el-select clearable style="width: 100px;" v-model="listQuery.status" placeholder="状态">
          <el-option key="1" label="上架" value="1"></el-option>
          <el-option key="-1" label="下架" value="-1"></el-option>
        </el-select>
        <el-button class="search" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" row-key="id" v-loading="listLoading" element-loading-text="加载中..." fit
                highlight-current-row :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" class="c-width100 color-222 family-PingFangSC-Regular font-s12">
        <el-table-column align="left" label="名称">
          <template slot-scope="scope">
            <img v-if="scope.row.avatar" :title="scope.row.name" :src="scope.row.avatar" width="80" height="80" class="fl margin-r c-verticalAlign-m">
            <div class="fl">
              <div :title="scope.row.name" class="color-222 line-limit-length-240 fl">
                {{scope.row.name}}
              </div>
              <el-popover class="fl font-s12" style="font-size: 12px" v-if="scope.row.name && scope.row.name.length>20"
                placement="left"
                width="400"
                trigger="hover">
                <div>{{scope.row.name}}</div>
                <i slot="reference" class="el-icon-view c-fc-deepskyblue margin-l10"></i>
              </el-popover>
              <div>{{scope.row.createdAt}}</div>
              <div class="margin-t10">
                <span class="original color-97" v-if="scope.row.originalPrice">原价：{{scope.row.originalPrice}}元</span>
                <span>￥{{scope.row.price}}元</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="排序">
          <template slot-scope="scope">
            <span>{{scope.row.sort}}</span>
          </template>
        </el-table-column>
        <el-table-column width="100" align="center" label="库存">
          <template slot-scope="scope">
            <span>{{scope.row.stock}}</span>
          </template>
        </el-table-column>
        <el-table-column width="50" align="center" label="已售数量">
          <template slot-scope="scope">
            <span>{{scope.row.sales}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="50" label="启用佣金">
          <template slot-scope="scope">
            <span v-if="scope.row.distributionEnabled==1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="50" label="是否热门">
          <template slot-scope="scope">
            <span v-if="scope.row.isHot==1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="50" label="是否新品">
          <template slot-scope="scope">
            <span v-if="scope.row.isNew==1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="50" label="是否上架">
          <template slot-scope="scope">
            <span v-if="scope.row.status==1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <!--<el-table-column width="100" align="center" label="类别">-->
          <!--<template slot-scope="scope">-->
            <!--<span>{{scope.row.catName}}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column width="130" align="center" label="操作">
          <template slot-scope="scope">

            <div class="text-alignL">
            <!--<b><router-link :to="`/mall/editProduct/${scope.row.mgId}`" @click.native="flushCom">编辑</router-link></b><span class="color-409">|</span>-->
            <!--&lt;!&ndash; <b v-if="permission == 3" @click="linkToEdit(scope.row.mgId)">编辑</b> &ndash;&gt;-->
              <b v-if="permission == 3" @click="linkToEdit(scope.row.mgId)">编辑</b>
              <span class="color-409" v-if="permission == 3">|</span>

              <b v-if="permission == 3" @click="deleteProduct(scope.row.mgId)">删除</b>

            <!-- <b><router-link :to="`/mall/editProduct/${scope.row.mgId}`" @click.native="flushCom">编辑</router-link></b><span class="color-409">|</span> -->

            </div>
            <div class="text-alignL">
              <b @click="handCopy(scope.row.copyUrl, $event)">复制链接</b>
              <span class="color-409" v-if="scope.row.status==1&&permission == 3">|</span>
            <b v-if="scope.row.status==1&&permission == 3" @click="productDown(scope.row.mgId, -1, scope.$index)">下架</b>
            <b v-if="scope.row.status!=1&&permission == 3" @click="productDown(scope.row.mgId, 1, scope.$index)">上架</b>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block text-c">
        <!--分页组件 current-page:当前页   -->
        <!--   page-sizes:每页几条数据（选项）   -->
        <!--   page-size:每页几条数据   -->
        <!--   total:总条数   -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listQuery.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import { getGoodsList, delGoods, goodsUpOrDown } from '@/api/goods'
  import clip from '@/utils/clipboard'
  import { mall_productList } from '@/utils/permission'
  // import {  getTimeString, formatNumber } from '@/utils/index'
  export default {
    data() {
      return {
        permission: 3,
        listQuery: {
          currentPage: 1, // 当前页
          total: null, // 数据总条数
          publish_time: null, // 搜索的发布时间（开始）
          end_time: null, // 搜索的发布时间（结束）
          name: null, // 搜索的产品名称
          selectSort: null, // 选择的产品分类
          page: 1
        },
        sortOptions: [],
        tableData: [],
        listLoading: false,
        copyUrl: null
      }
    },
    watch: {
      '$route': function() {
        this.listQuery.selectSort = null
        this.getList()
      }
    },
    created() {
      this.getModelPermission()
      if (this.$route.params.catId) {
        this.listQuery.selectSort = this.$route.params.catId
      }
      this.getList()
    },
    methods: {
      flushCom: function() {
        this.$router.go(0)
      },
      getModelPermission() {
        this.permission = mall_productList()
      },
      getList() {
        this.listLoading = true
        getGoodsList(this.listQuery).then(res => {
          console.log('商品列表', res.data.data.list.data)
          this.tableData = res.data.data.list.data
          this.listQuery.total = res.data.data.list.total
          this.sortOptions = res.data.data.cate
          this.copyUrl = res.data.data.copyUrl
          this.listLoading = false
        }).catch(err => {
          console.log(err)
        })
      },
      hideAdd(msg) { // 隐藏添加组件
        this.isShowAdd = msg
      },
      deleteProduct(mgId) { // 删除商品
        this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var data = { mgId: mgId }
          delGoods(data).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          }).catch(err => {
            console.log(err)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      productDown(mgId, status, index) { // 商品下架
        this.$confirm((status == -1 ? '下架后，前端不显示，' : '') + '确定' + (status == -1 ? '下架' : '上架') + '该商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var data = { mgId: mgId, status: status }
          goodsUpOrDown(data).then(res => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.tableData[index].status = status
          }).catch(err => {
            console.log(err)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      linkToAdd() {
        this.$router.push({ path: `/mall/createProduct` })
      },
      linkToEdit(id) { // 跳转至编辑页面
        this.$router.push({ path: `/mall/editProduct/${id}` })
      },
      handleSizeChange(val) { // 切换每页几条数据方法
        // console.log(`每页 ${val} 条`)
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) { // 切换当前页
        // console.log(`当前页: ${val}`)
        this.listQuery.page = val
        this.getList()
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handCopy(url, event) {
        clip(url, event)
      }
    }
  }
</script>

<style scoped>
  b {
    padding: 0;

  }
  .original{
    text-decoration: line-through;
    margin-right: 10px;
  }
</style>
